{include file="public/toper" /}
<div class="x-body">
    <form action="" method="post" class="layui-form layui-form-pane" id="forms">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>角色名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="role_name" value="{$data_info['role_name']}" required="" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text role-list-form">
            <label class="layui-form-label">拥有权限</label>
            <table  class="layui-table layui-input-block">
                <tbody>
                {volist name="menu_list" id="v"}
                <tr>
                    <td>
                        <input type="checkbox" name="role_auth[]" lay-filter="roleAuth" value="{$v['id']}" data-parent="0" data-level="1" lay-skin="primary" title="{$v['title']}">
                    </td>
                    <td>
                        <div class="layui-input-block">
                            {volist name="v['childs']" id="vv"}
                            <input type="checkbox"  name="role_auth[]" lay-filter="roleAuth"  value="{$vv['id']}" data-pid="{$vv['pid']}"  data-level="2" lay-skin="primary" title="{$vv['title']}">
                            {/volist}
                        </div>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="desc" class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" lay-verify="required" id="desc" name="role_desc" class="layui-textarea">{$data_info['role_desc']}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" class="field-id" name="admin_role_id" value="{$data_info['admin_role_id']}">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
        </div>
    </form>
</div>
{include file="public/footer" /}

<script>
    var formData = {:json_encode($data_info)};
    layui.use(['form'], function() {
        var $ = layui.jquery, form = layui.form;
        /* 有BUG 待完善*/
        form.on('checkbox(roleAuth)', function(data) {
            var child = $(data.elem).parent('td').siblings('td').find('input');
            /* 自动选中父节点 */
            var check_parent = function (id) {
                var self = $('.role-list-form input[value="'+id+'"]');
                var pid = self.attr('data-pid') || '';
                self.prop('checked', true);
                if (pid == '') {
                    return false;
                }
                check_parent(pid);
            };
            /* 自动选中子节点 */
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            check_parent($(data.elem).attr('data-pid'));
            form.render('checkbox');
        });

        /* 权限赋值 */
        if (formData) {
            for(var i in formData['role_auth']) {
                $('.role-list-form input[value="'+formData['role_auth'][i]+'"]').prop('checked', true);
            }
            form.render('checkbox');
        }




        //监听提交
        // $(window).on('load', function() {
        //     form.on('submit(formSubmit)', function(data) {
        //         $.ajax({
        //             url:"{:url()}",
        //             type:'post',
        //             data:$('#forms').serialize(),
        //             async: false,
        //             success:function(res) {
        //                 if(res.code == 200) {
        //                     layer.alert(res.msg, {icon: 6},function () {
        //                         // 获得frame索引
        //                         var index = parent.layer.getFrameIndex(window.name);
        //                         //关闭当前frame
        //                         parent.layer.close(index);
        //                         parent.location.reload();
        //                     })
        //                 } else {
        //                     layer.msg(res.msg,{icon: 2});
        //                 }
        //             }
        //         });
        //         return false;
        //     });
        // });
    });



    layui.use(['jquery'], function() {
        var $ = layui.jquery, input = '';
        /* 修改模式下表单自动赋值 */
        if (formData) {
            for (var i in formData) {
                switch($('.field-'+i).attr('type')) {
                    case 'select':
                        input = $('.field-'+i).find('option[value="'+formData[i]+'"]');
                        input.prop("selected", true);
                        break;
                    case 'radio':
                        input = $('.field-'+i+'[value="'+formData[i]+'"]');
                        input.prop('checked', true);
                        break;
                    case 'checkbox':
                        if (typeof(formData[i]) == 'object') {
                            for(var j in formData[i]) {
                                input = $('.field-'+i+'[value="'+formData[i][j]+'"]');
                                input.prop('checked', true);
                            }
                        } else {
                            input = $('.field-'+i+'[value="'+formData[i]+'"]');
                            input.prop('checked', true);
                        }
                        break;
                    case 'img':
                        input = $('.field-'+i);
                        input.attr('src', formData[i]);
                    default:
                        input = $('.field-'+i);
                        input.val(formData[i]);
                        break;
                }
                if (input.attr('data-disabled')) {
                    input.prop('disabled', true);
                }
                if (input.attr('data-readonly')) {
                    input.prop('readonly', true);
                }
            }
        }
    });
</script>